<div class="main-section">
    <h1 class="main-section__title">Data table</h1>

    <p class="main-section__intro">
        <code>lx-data-table</code> is a directive that creates a data table.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/data-table/includes/basic.html" lx-js-path="/js/data-table/demo/demo-data-table_controller.js"></lx-component>
    <lx-component lx-title="Layout example" lx-path="/includes/modules/data-table/includes/advanced.html" lx-js-path="/js/data-table/demo/demo-data-table_controller.js"></lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-activable</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Specify if the data table rows can be activated (Note: this is different from being selected).</td>
                </tr>
                <tr>
                    <td>lx-border</td>
                    <td><code>boolean</code></td>
                    <td><code>true</code></td>
                    <td>Specify if the data table rows have border.</td>
                </tr>
                <tr>
                    <td>lx-bulk</td>
                    <td><code>boolean</code></td>
                    <td><code>true</code></td>
                    <td>Specify if all the rows can be seleted through a global checkbox.</td>
                </tr>
                <tr>
                    <td>lx-selectable</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Specify if a data table row is selectable or not.</td>
                </tr>
                <tr>
                    <td>lx-tbody</td>
                    <td><code>object</code></td>
                    <td></td>
                    <td>Define the data table tbody (see the demo controller for more help).</td>
                </tr>
                <tr>
                    <td>lx-thead</td>
                    <td><code>object</code></td>
                    <td></td>
                    <td>Define the data table thead (see the demo controller for more help).</td>
                </tr>
                <tr>
                    <td>lx-thumbnail</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Make the first tbody array element the row thumbnail. Format option should return a 36px squared image.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>

    <lx-component-methods lx-title="Service api">
        <lx-component-method lx-name="LxDataTableService.select(dataTableId, row)" lx-description="Select a specific row in a data table.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dataTableId*</td>
                        <td><code>string</code></td>
                        <td>The data table id given as the directive's id attribute.</td>
                    </tr>
                    <tr>
                        <td>row*</td>
                        <td><code>object</code></td>
                        <td>The row object to select in the data table.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="LxDataTableService.selectAll(dataTableId)" lx-description="Select all rows of a data table.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dataTableId*</td>
                        <td><code>string</code></td>
                        <td>The data table id given as the directive's id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="LxDataTableService.unselect(dataTableId, row)" lx-description="Unselect a specific row in a data table.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dataTableId*</td>
                        <td><code>string</code></td>
                        <td>The data table id given as the directive's id attribute.</td>
                    </tr>
                    <tr>
                        <td>row*</td>
                        <td><code>object</code></td>
                        <td>The row object to unselect in the data table.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="LxDataTableService.unselectAll(dataTableId)" lx-description="Unselect all rows of a data table.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dataTableId*</td>
                        <td><code>string</code></td>
                        <td>The data table id given as the directive's id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="LxDataTableService.activate(dataTableId, row)" lx-description="Activate a specific row in a data table.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dataTableId*</td>
                        <td><code>string</code></td>
                        <td>The data table id given as the directive's id attribute.</td>
                    </tr>
                    <tr>
                        <td>row*</td>
                        <td><code>object</code></td>
                        <td>The row object to activate in the data table.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="LxDataTableService.deactivate(dataTableId, row)" lx-description="Deactivate a specific row in a data table.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dataTableId*</td>
                        <td><code>string</code></td>
                        <td>The data table id given as the directive's id attribute.</td>
                    </tr>
                    <tr>
                        <td>row*</td>
                        <td><code>object</code></td>
                        <td>The row object to deactivate in the data table.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>
    </lx-component-methods>

    <lx-component-methods lx-title="Events">
        <lx-component-method lx-name="lx-data-table__selected" lx-description="A broadcast is sent when a row is selected.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The original broadcasted event.</td>
                    </tr>
                    <tr>
                        <td>dataTableId</td>
                        <td><code>string</code></td>
                        <td>The id of the data table the selected rows are part of.</td>
                    </tr>
                    <tr>
                        <td>selectedRows</td>
                        <td><code>array</code></td>
                        <td>The selected rows (from the tbody array).</td>
                    </tr>
                    <tr>
                        <td>selectedRow</td>
                        <td><code>object</code></td>
                        <td>The selected row (from the tbody array).</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="lx-data-table__unselected" lx-description="A broadcast is sent when a row is unselected.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The original broadcasted event.</td>
                    </tr>
                    <tr>
                        <td>dataTableId</td>
                        <td><code>string</code></td>
                        <td>The id of the data table the selected rows are part of.</td>
                    </tr>
                    <tr>
                        <td>selectedRows</td>
                        <td><code>array</code></td>
                        <td>The selected rows (from the tbody array).</td>
                    </tr>
                    <tr>
                        <td>unselectedRow</td>
                        <td><code>object</code></td>
                        <td>The unselected row (from the tbody array).</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="lx-data-table__sorted" lx-description="A broadcast is sent when a column is sorted.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The original broadcasted event.</td>
                    </tr>
                    <tr>
                        <td>dataTableId</td>
                        <td><code>string</code></td>
                        <td>The id of the data table the selected rows are part of.</td>
                    </tr>
                    <tr>
                        <td>column</td>
                        <td><code>object</code></td>
                        <td>The column (from the thead array) we are sorting on.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>
    </lx-component-methods>
</div>
